<template>
  <t-dialog :header="title" :visible="visible" :onClose="bodyClose3" :onConfirm="bodyClose3">
        <div slot="body">
            <div class="serial-cald">
                <div class="serial">一级分类</div>
                <t-input />
            </div>
            <div class="serial-cald">
                <div class="serial">
                    <span class="serial-title">二级分类</span>
                    <t-button shape="circle" theme="primary" @click="isdeletebtn">
                        <Edit1Icon/>
                    </t-button>
                </div>
                <div class="label">
                    <span>
                        分类啊
                        <t-button shape="circle" :block="true" @click="deleteification" theme="danger" class="label-btn" v-show="isbtn">
                            <CloseIcon/>
                        </t-button>
                    </span>
                    <input type="text" ref="inputdata" placeholder="请输入" class="label-input" v-show="isinput">
                    <span @click="custom">
                        <AddIcon v-show="isaddicon"/>{{ tipstext }}
                    </span>
                </div>
            </div>
        </div>
      </t-dialog>
</template>

<script>
import { CloseIcon, Edit1Icon, AddIcon } from 'tdesign-icons-vue';

export default {
    name: 'addclassification',
    components: {
        CloseIcon,
        Edit1Icon,
        AddIcon
    },
    props: {
        confirmBody:{
            type: Object ,
        }
    },
    data() {
        return {
            isinput: false, // 控制input是否出现
            isbtn: false, // 控制删除按钮
            visible: false, // 弹框开关
            isaddicon: true, // 控制icon是否显示
            tipstext: '自定义',
            title:'新增分类',
            classification: {} // 数据
        }
    },
    watch: {
        confirmBody () {
           if ( this.confirmBody ) {
               this.title = '修改'
            } else {
               this.title = '新增'
           }
        },

        visible () {
            if ( !this.visible ) {
                this.title = '新增分类'
            }
        }
    },
    methods: {
        // 点击删除按钮触发
        deleteification () {
            // 加loding
            this.$message.success('删除成功')
        },

        // 是否显示删除按钮(编辑)
        isdeletebtn () {
            this.isbtn = !this.isbtn
        },

        // 自定义
        custom () {
            this.isinput = !this.isinput
            if (this.isinput) {
                this.$nextTick(() => {
                    this.$refs.inputdata.focus()
                }, 1000)
            }
            if (this.tipstext == '自定义') {
                this.tipstext = '取消自定义'
            } else {
                this.tipstext = '自定义'
            }
            this.isaddicon = !this.isaddicon
        },

        // 关闭弹框触发
        bodyClose3() {
            this.visible = false;
        },
    }
}
</script>

<style lang="less" scoped>
.serial-cald {
    padding: 0 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgb(216, 216, 216);
    margin-bottom: 10px;
    .label {
        width: 100%;
        height: 100px;
        border: 1px solid rgb(205, 205, 205);
        border-radius: 6px;
        padding: 16px 0;
        .label-input {
            width: 60px;
            margin-left: 10px;
            border-color: rgb(205, 205, 205);
            border-width: 1px;
            border-radius: 4px;
            // padding-left: 4px;
            font-size: 14px;
            padding: 2px;
        }
        span {
            border: 1px solid rgb(205, 205, 205);
            border-radius: 4px;
            padding: 2px;
            position: relative;
            margin-left: 10px;
            .label-btn {
                width: 16px;
                height: 16px;
                font-size: 4px;
                position: absolute;
                right: -9px;
                top: -10px;
            }
        }
    }
}
.serial {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 10px;
    display: flex;
    .serial-title {
        flex: 1;
    }
}

</style>